<template>
  <div>
    <div class="tou">
        <van-icon @click="off()" name="cross" />
        <span>职业百科</span>
        <van-cell @click="showPopup">
          <van-icon name="share-o" />
        </van-cell>
        <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
          <div class="lian">
            <p v-for="(v,i) in lian" :key="i">
              <img :src="v.imgurl" alt="">
              <span>{{v.txt}}</span>
            </p>
          </div>
        </van-popup>
    </div>
    <div class="bank">
      <p @click="search()">
        <van-icon name="search" />
        <input type="text" placeholder="请输入职业名称"/>
      </p>
    </div>

    <div class="about">
      <h1>与你相关</h1>
      <div class="small" v-for="(v,i) in arrtxt" :key="i">
        <van-icon name="font-o" />
        <p>
          <span>{{v.txt1}}</span>
          <span>{{v.txt2}}</span>
        </p>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      lian:[
        {imgurl:"img/wx.jpg",txt:"微信好友"},
        {imgurl:"img/quan.jpg",txt:"微信朋友圈"},
        {imgurl:"img/lian.jpg",txt:"复制链接"}
      ],
      arrtxt:[
          {txt1:"移动 Web 前端",txt2:"薪资收入 | 入行经验 | 岗位晋升 | 推荐书籍"},
          {txt1:"Web 前端工程师",txt2:"职业发展 | 工作内容 | 常用工具 | 薪资收入"},
          {txt1:"移动 Web 前端",txt2:"推荐书籍 | 职业发展 | 薪资收入 | 岗位晋升"}
      ]
    };
  },
  methods:{
    off(){
      this.$router.push('/have')
    },
    showPopup() {
      this.show = true;
    },
  }
};
</script>

<style scoped>
.tou {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.10rem 0.20rem;
    border-bottom: 0.01rem solid #f0f0f0;
}
.tou .van-icon {
  font-size: 0.20rem;
}
.tou .van-cell {
  width: 0.50rem;
  font-size: 0.20rem;
}
.lian {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.lian > p {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lian > p > img {
  width: 0.60rem;
  height: 0.60rem;
}

.bank {
      display: flex;
    padding: 0.20rem 0.20rem;
    justify-content: space-between;
    align-items: center;
}
.bank > p {
    position: relative;
    width: 100%;
    height: 0.3rem;
}
.bank > p > i {
    position: absolute;
    left: 0.20rem;
    top: 0.06rem;
    font-size: 0.20rem;
}
.bank > p input {
  width: 100%;
    background: #f0f0f0;
    padding-left: 0.50rem;
    height: 100%;
    border: 0;
    font-size: 0.14rem;
    border-radius: 0.60rem;
    box-sizing: border-box;
}

/* about */
.about {
  margin: 0.10rem 0.20rem;
}
.about > h1 {
  font-size: 0.18rem;
  margin: 0.10rem 0;
}
.about > .small {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0.01rem solid #ccc;
    border-radius: 0.06rem;
    margin-bottom: 0.20rem;
    padding: 0.10rem;
}
.about > .small > i {
    font-size: 0.36rem;
    color: #fff;
    background: blue;
    border-radius: 0.04rem;
}
.about > .small > p {
  display: flex;
  flex-direction: column;
}
.about > .small > p > span:nth-child(1) {
  font-size: 0.20rem;
  font-weight: bold;
}
.about > .small > p > span:nth-child(2) {
  font-size: 0.14rem;
  color: #999;
}
</style>